<template>
    <!-- 找回账号 -->
    <div class="bodybox flexcenter">
        <Logintop />
        <div class="radius ffffff mainpadding2">
            <div class="titletext flexcenter">通过证件号找回已实名账号</div>
            <div class="margin-top4">
                <el-form :model="ruleForm" :rules="rules" label-position="top" ref="ruleForm" label-width="200px"
                    class="demo-ruleForm">
                    <el-form-item prop="realName">
                        <el-input type="text" v-model="ruleForm.realName" placeholder="请输入真实姓名"></el-input>
                    </el-form-item>
                    <el-form-item prop="idNumber">
                        <el-input v-model="ruleForm.idNumber" placeholder="请输入身份证号"> </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="submitbtn margin-top4" @click="nextone('ruleForm')">下一步</div>
        </div>
    </div>
</template>

<script>
import Logintop from "./component/logintop.vue";
export default {
    components: {
        Logintop
    },
    data() {
        var isCardId = (rule, value, callback) => {
            if (!value) {
                return new Error("请输入身份证号)");
            } else {
                const reg =
                    /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
                const card = reg.test(value);
                if (!card) {
                    callback(new Error("身份证号格式有误！"));
                } else {
                    callback();
                }
            }
        };
        var validLength = function (rule, value, callback) {
            function getStrLength(str) {
                // 当数据库编码为一个汉字占3个字节时，把字符中的每个汉字都替换成'xxx'再得出长度
                return str.replace(/[^x00-xff]/g, 'xxx').length;
            }
            if (!value) {
                callback();
            } else if (getStrLength(value) <= 200 && getStrLength(value)>=2) {
                callback();
            } else {
                return callback(new Error('输入限制2-100字符'))
            }
        };
        return {
            color1: "#333333",
            color2: "#d1d2de",
            step: 1,
            ruleForm: {
                idNumber: '',// 身份证号
                realName: '',// 姓名
            },
            rules: {
                realName: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' },
                    { validator: validLength, trigger: "blur" }

                ],
                idNumber: [
                    { required: true, message: '身份证号不能为空', trigger: 'blur' },
                    { validator: isCardId, trigger: "blur" }
                ],
            }
        }
    },
    methods: {
        // 账号校验
        nextone(formName) {
            let ruleForm = this.ruleForm
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    this.$router.push({
                        name: "realnameRetrieval", params: {
                            ruleForm
                        }
                    },()=>{})
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        }
    }
}
</script>
<style lang="scss">
.bodybox .el-input-group__append {
    background: none;
}

.bodybox .el-input__inner {
    height: 55px;
}
</style>
<style lang="scss" scoped>
.nofocus {
    background-color: #ceced6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin-right: 5px;
}

.focus {
    background-color: #e61717;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin-right: 5px;

}

.mainpadding2 {
    padding: 50px 25px 100px;
    min-width: 500px;
}

.bodybox {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>